@import "reset.css";
@import "icon-font.css";
@import "./tools/_flex.scss";
@import "./tools/_tools.scss";
@import "input-range.css";

$fontSize: 1rem;
$d: 0px 5px 10px 15px 20px;
$baseColor: rgb(233, 32, 61);
$fontColor: #333;
$whiteColor: #fff;
$borderColor: #d9d9d9;
$grayColor: #f5f5f5;
$font: 'Lucida Grande', 'Helvetica', 'Microsoft yahei', 'STHeiti';
%flex-row {
    @include flexBox;
    @include justify-content(flex-start);
    @include align-items(center);
    @include flexDirection(row);
}

* {
    @include boxSizing;
}

body {
    font-size: $fontSize*0.95;
}

.loading {
    height: 100%;
    width: 100%;
    position: absolute;
    @include flexBox;
    @include justify-content(center);
    @include align-items(center);
    @include flexDirection(row);
    i {
        font-size: $fontSize*3;
        color: #888;
        @include animation(rotate-the-object 1.4s infinite linear);
        @include keyframes(rotate-the-object) {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    }
}

.input {
    border: none;
    background: $whiteColor;
    width: 100%;
    font-size: $fontSize*0.95;
    font-family: $font;
}

.container-flex {
    @include flexBox;
    @include flexDirection(column);
    @include justify-content(space-around);
}

.login {
    @include flex(1);
    @include flexBox;
    @include flexDirection(column);
    @include justify-content(space-around);
    padding: 150px 0;
    p {
        position: relative;
        margin: 25px;
        @extend %flex-row;
        border-radius: 30px;
        overflow: hidden;
        border: 1px solid #b8b8b8;
        i {
            font-size: $fontSize*1.4;
            margin: 0 5px 0 10px;
        }
        em {
            padding-right: 8px;
            font-size: $fontSize*1.2;
            color: #888;
        }
    }
    .error {
        height: 30px;
        line-height: 30px;
        color: $baseColor;
        text-align: center;
    }
    input {
        @extend .input;
        color: #333;
        padding: nth($d, 4) nth($d, 2);
    }
    .input-button {
        background: $baseColor;
        border-radius: 30px;
        color: #fff;

    }
}

/*********header***********/
.header {
    background: $baseColor;
    height: $fontSize*3;
    color: $whiteColor;
    padding: nth($d, 1) nth($d, 3);
    @extend %flex-row;
    .cityName {
        padding-left: nth($d, 1);
        a {
            @extend %flex-row;
            span {
                color: $whiteColor;
            }
            i {
                font-size: $fontSize*1.92;
                color: $whiteColor;
                margin-top: 2px;
            }
        }

    }
    .searchBar {
        @include flex(1);
        padding: 0 $fontSize/2;
        .searchInput {
            @extend %flex-row;
            border-radius: 1rem;
            background: $whiteColor;
            padding: 0 14px 0 12px;
            overflow: hidden;
            .input-search {
                height: 32px;
                padding-left: 5px;
            }
            i {
                color: #888;
                font-size: $fontSize*1.2;
                &:last-child {
                    padding-bottom: 3px;
                }
            }
        }
    }
    .music-icon {
        text-align: right;
        padding-right: nth($d, 1);
        .music-icon-animate {
            span {
                display: inline-block;
                width: 2px;
                height: 1.2rem;
                margin: 0 2px;
                background: $whiteColor;
            }
            .one {
                height: 1.2rem;
                @include animation(waves 0.6s linear 0s infinite);
            }
            .two {
                height: 0.4rem;
                @include animation(waves 0.9s linear 0s infinite);
            }
            .three {
                height: 0.8rem;
                @include animation(waves 1s linear 0s infinite);
            }
            .four {
                height: 0.4rem;
                @include animation(waves 0.8s linear 0s infinite);
            }
            .paused {
                -webkit-animation-play-state: paused;
                animation-play-state: paused;
            }
            .playing {
                -webkit-animation-play-state: running;
                animation-play-state: running;
            }

        }
        @include keyframes(waves) {
            20% {
                height: 0.2rem;
            }
            40% {
                height: 0.4rem;
            }
            60% {
                height: 0.6rem;
            }
            80% {
                height: 0.8rem;
            }
            10% {
                height: 1.2rem;
            }
        }
    }
    .headerBack {
        @extend %flex-row;
        width: 10.5%;
        i {
            font-size: $fontSize*2;
            margin-top: 2px;
        }
    }
    .headerTitle {
        @include flex(1);
        text-align: center;
    }
    .headerRight {
        width: 10.5%;
        text-align: right;
    }
}

/********导航***********/
.nav {
    @extend %flex-row;
    @include justify-content(space-around);
    li {
        height: 44px;
        line-height: 44px;
        padding: 0 4%;
    }
    .active {
        box-shadow: inset 0px -2px 0px $baseColor;
        a {
            color: $baseColor;
        }
    }
}

/**********轮播样式***********/
@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";
.slick-dots {
    bottom: nth($d, 3);
}

.slick-dots li button:before {
    color: #fff;
    opacity: 0.25;
}

.slick-dots li.slick-active button:before {
    color: $baseColor;
}

/************歌单***************/
.title {
    @extend %flex-row;
    @include justify-content(space-between);
    border-bottom: 1px solid $borderColor;
    padding: nth($d, 3) nth($d, 1);
    margin: 0 8px;
    i {
        font-size: $fontSize*1.5;
    }
    a {
        color: #888;
    }
}

.songPlay {
    @include clearfix;
    padding: nth($d, 2)-1;
    li {
        width: percentage(100/3/100);
        padding: 4px;
        @include float(left);
        a {
            position: relative;
            display: block;

            width: 100%;
            height: 100%;
            p {
                padding: nth($d, 2);
                overflow: hidden;
                height: $fontSize*2.8;
                word-break: break-all;
                font-size: $fontSize*0.9;
            }
            .albumTips {
                position: absolute;
                padding: 4px nth($d, 2);
                color: $whiteColor;
                font-size: $fontSize*0.7;
                left: 0;
                top: 0;
                width: 100%;
                @extend %flex-row;
                @include justify-content(flex-end);
                i {
                    margin-right: 3px;
                    font-size: $fontSize*0.8;
                    margin-top: 2px;
                }
            }
        }

    }
}

.album-bg {
    height: 10rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    filter: blur(60px);
    -webkit-filter: blur(60px);
    position: relative;
    z-index: -1;
}

.album-info {
    @extend %flex-row;
    padding: nth($d, 3);
    width: 100%;
    height: 10rem;
    margin-top: -10.0rem;
    .album-img {
        width: $fontSize*8.5;
        margin: 0;
    }
    .album-text {
        padding-left: nth($d, 3);
        p {
            line-height: 1.7rem;
        }
    }
}

.album-list {
    background: $whiteColor;
    padding: nth($d, 3);
    padding-top: 0;
    ul {
        @include flexBox;
        @include flexDirection(column);
        li {
            @extend %flex-row;
            @include justify-content(space-between);
            border-bottom: 1px solid $borderColor;
            padding: nth($d, 3) 0;
            .album-remark {
                font-size: $fontSize*0.8;
                color: #888;
                padding-top: nth($d, 2);
            }
            i {
                color: #888;
                font-size: $fontSize;
            }
        }
    }
}

/************音乐播放************/
.container-full {
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
}

.container-bg {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    filter: blur(80px);
    -webkit-filter: blur(80px);
    z-index: -1;
}

.container-play {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    @include flexBox;
    @include flexDirection(column);
    .container-inner {
        @include flex(1);
        @include flexBox;
        @include flexDirection(column);
        @include justify-content(space-around);
        .player-title {
            position: relative;
            .songName, .singerName {
                text-align: center;
                color: $whiteColor;
                @include text-ellipsis;
                margin: 0 25px;
            }
            .songName {
                font-size: $fontSize*1.5;
                padding: nth($d, 2) 0;
            }
            .dot {
                position: absolute;
                right: 20px;
                top: 11px;
                i {
                    color: #fff;
                    font-size: $fontSize*1.6;
                }
            }
        }
        .sliderContainer {
            height: $fontSize*20;
            .slick-list {
                height: 100%;
                .slick-track {
                    height: 100%;
                }
            }
            .content-player {
                @extend %flex-row;
                @include justify-content(center);
                height: 100%;
            }
            .slick-dots li.slick-active button:before {
                color: #fff;
            }
            .slick-dots {
                bottom: -25px;
                left: 0;
            }
            .lyric {
                position: relative;
                overflow: hidden;
                .originLyric {
                    padding: nth($d, 3) nth($d, 5);
                    width: 100%;
                    @include transition(all 0.25s ease 0.05s);
                    .line {
                        text-align: center;
                        color: rgba(255, 255, 255, 0.9);
                        @include flexBox;
                        @include justify-content(center);
                        @include align-items(center);
                        @include text-ellipsis;
                    }
                    .on {
                        color: $baseColor;
                    }
                }
            }
        }
    }
}

.dot-modal {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    @include transition(all 0.25s ease 0s);
    @include transform(translateY(100%));
    color: #fff;
    h1 {

        border-bottom: 1px solid #9d9d9d;
        padding: nth($d, 4);
    }
    .volume {
        padding: nth($d, 4);
        @extend %flex-row;
        .volume-icon {
            width: 30px;
            height: 30px;
            background-position: center center;
            background-repeat: no-repeat;
        }
        .volume-slider {
            flex: 1;
            height: 2px;
            background: #858585;
            position: relative;
            .volume-mask {
                position: absolute;
                width: 10px;
                height: 100%;
                left: 0;
                top: 0;
                background: $baseColor;
            }
            .volume-bar {
                position: absolute;
                width: 10px;
                border-radius: 50%;
                height: 10px;
                left: 10px;
                top: -4px;
                background: $baseColor;
            }
        }
    }
    .cancel {
        padding: nth($d, 4);
        text-align: center;
        border-top: 1px solid #9d9d9d;
    }
    .move-btn {
        padding: nth($d, 4);
        border-bottom: 1px solid #9d9d9d;
        @extend %flex-row;
        .icon-btn {
            @include flexBox;
            @include flexDirection(column);
            @include justify-content(center);
            @include align-items(center);
            background: #333;
            border-radius: 0.25rem;
            margin-right: nth($d, 4);
            width: 36px;
            height: 36px;
            i {
                color: #d9d9d9;
                font-size: $fontSize*1.1;
            }
            .info-text {
                padding-top: 10px;
                padding-bottom: 2px;
                font-size: $fontSize*0.8;
                font-family: $font;
            }
        }
    }
}

/*********旋转唱片*********/
.components-album {
    @include horizontal-center;
    border-radius: 50%;
    background: rgba(250, 250, 250, 0.7);
    width: 16rem;
    height: 16rem;
    @include box-shadow(0, 0, 10px, rgba(0, 0, 0, 0.4));
    position: relative;
    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: 50%;
        box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, 0.3);
        z-index: 100;
    }
    .album-pic {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        @include animation(rotate-the-object 9.5s infinite linear);
        @include keyframes(rotate-the-object) {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    }
    .paused {
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }
    .playing {
        -webkit-animation-play-state: running;
        animation-play-state: running;
    }
}

.components-player-control {
    width: 100%;
    padding: 20px;
    @include flexBox;
    @include flexDirection(column);
    @include justify-content(space-around);

    .player-time {
        font-family: 'PingFang SC';
        @include flexBox;
        @include justify-content(center);
        @include align-items(center);
        padding: 10px 0;
        .time_left {
            padding-top: 10px;
            padding-right: 10px;
            color: $whiteColor;
        }
        .time_right {
            padding-top: 10px;
            padding-left: 10px;
            text-align: right;
            color: $whiteColor;
        }
        .player-range {
            @include flex(1);
        }
    }
    .player-btn {
        @extend .player-time;
        @include justify-content(space-between);
        i {
            color: #fff;
            font-size: $fontSize*3.5;
        }

    }
}

/*********当前播放音乐列表弹层*************/
.modal-music-list {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, 1);
    z-index: 1001;
    @include transition(all 0.25s ease 0s);
    @include transform(translateY(100%));
    .list-title {
        padding: nth($d, 4);
        border-bottom: 1px solid $borderColor;
        @extend %flex-row;
        @include justify-content(space-between);
        i {
            font-size: $fontSize*1.2;
        }
        em {
            font-style: normal;
            color: $baseColor;
        }
    }
    .list-ul {
        height: 300px;
        overflow: auto;
        li {
            @extend .list-title;
            padding: nth($d, 4) 0;
            margin: 0 nth($d, 4);
            i {
                color: #888;
                font-size: $fontSize*1.2;
            }
            .active {
                color: $baseColor;
            }
        }
    }
}

/********排行榜**********/
.rankList {
    li a {
        @extend %flex-row;
        @include justify-content(flex-start);
        padding: nth($d, 3) 0;
        margin: 0 nth($d, 3);
        border-bottom: 1px solid $borderColor;
        img {
            width: 100px;
        }
        div {
            @include flex(1);
            padding-left: nth($d, 3);
            p {
                font-size: 1rem;
            }
        }
        i {
            font-size: $fontSize*2;
            color: #b0b0b0;
        }
    }
}

.rank_banner {
    height: $fontSize*15;
    position: relative;
    .banner_img {
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .rank_tips_time {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: nth($d, 3);
        text-align: right;
        color: #fff;
    }
}

.play_all {
    border-bottom: 1px solid $baseColor;
    padding: nth($d,4)-2;
    padding-right: nth($d, 3);
    color: $baseColor;
    @extend %flex-row;
    @include justify-content(space-between);
    i {
        font-size: $fontSize*1.5;
    }
}

.songList {
    li {
        @extend %flex-row;
        @include justify-content(space-around);
        padding: nth($d, 4) 0;
        margin: 0 nth($d, 3);
        border-bottom: 1px solid $borderColor;
        em {
            width: $fontSize*1.4;
            height: $fontSize*1.4;
            border-radius: 50%;
            margin-right: 5px;
            @include flexBox;
            @include justify-content(center);
            @include align-items(center);
        }
        a {
            @include flex(1);
            .active {
                color: $baseColor;
            }
        }
        &:nth-child(1) em {
            background: $baseColor;
            color: #fff;
        }
        &:nth-child(2) em {
            background: #f90;
            color: #fff;
        }
        &:nth-child(3) em {
            background: #f70;
            color: #fff;
        }
        i {
            font-size: 1rem;
            color: #888;
            margin-left: 10px;
        }
    }
}

/*****歌手******/
.artistList {
    padding: nth($d, 3);
    li {
        border: 1px solid $borderColor;
        border-bottom: none;
        padding: nth($d, 4);
        padding-right: nth($d, 3);
        a {
            @extend %flex-row;
            @include justify-content(space-between);
            i {
                font-size: $fontSize*1.3;
                color: #b0b0b0;
            }
        }
        &:nth-child(1) {
            margin-bottom: nth($d, 5);
            border-bottom: 1px solid $borderColor;
        }
        &:nth-child(4), &:nth-child(7) {
            margin-bottom: nth($d, 5);
            border-bottom: 1px solid $borderColor;
        }
        &:last-child {
            border-bottom: 1px solid $borderColor;
        }
    }
}

.singer-info {
    padding: nth($d, 3);
    .text-info {
        line-height: 1.8em;
    }
}

.artistSingerList {
    li {
        padding: nth($d, 3) 0;
        margin: 0 nth($d, 3);
        border-bottom: 1px solid $borderColor;
        a {
            @extend %flex-row;
            img {
                width: 60px;
                height: 60px;
            }
            span {
                @include flex(1);
                padding-left: nth($d, 3);
            }
            i {
                font-size: $fontSize*1.3;
                color: #b0b0b0;
            }
        }
    }
}

.album-bg-singer {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 200px;
    @extend %flex-row;
    @include justify-content(center);
    i {
        color: #fff;
        font-size: 64px;
    }
}

/*********搜索************/
.searchTitle {
    padding: nth($d,3)+2 0;
    margin: 0 nth($d, 3);
    border-bottom: 1px solid $borderColor;
    @extend %flex-row;
    @include justify-content(space-between);
    em {
        color: $baseColor
    }
}

.hotList {
    padding: nth($d, 3);
    padding-bottom: 0;
    @extend %flex-row;
    @include flex-flow(row, wrap);
    span {
        padding: nth($d,3)-2 nth($d, 4);
        border-radius: 20px;
        border: 1px solid $borderColor;
        margin: 0 nth($d, 3) nth($d, 3) 0;
        &:first-child {
            border-color: $baseColor;
            color: $baseColor;
        }
    }
}

.searchHistory {
    padding: 0 nth($d, 3);
    p {
        padding: nth($d,3)+2 0;
        border-bottom: 1px solid $borderColor;
        @extend %flex-row;
        @include justify-content(space-between);
        em {
            font-size: $fontSize*1.2;
            color: #888;
        }
    }
}

/*******用户中心*******/

.userBox {
    @include flexBox;
    @include flexDirection(column);
    padding: 10px 0;
    img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        overflow: hidden;
        margin: 20px auto;
    }
    .userInfo {
        text-align: center;
    }
}

.list-block {
    li {
        @extend %flex-row;
        @include justify-content(space-between);
        border-bottom: 1px solid $borderColor;
        padding: 15px 0;
        margin: 0 10px;
        i {
            font-size: $fontSize*1.3;
            color: #888;
        }
    }
}

.copyright {
    p {
        margin: 0 10px;
        padding: 5px 0
    }
}

.no-data {
    img {
        width: 100px;
        margin-top: 50%;
    }
    span {
        text-align: center;
        display: block;
    }
}

/*********04页面*********/
.notFound {
    @include flexBox;
    @include flexDirection(column);
    @include justify-content(flex-start);
    padding-top: 25%;
    height: 100%;
    position: absolute;
    width: 100%;
    img {
        width: 70%;
    }
    span {
        display: block;
        text-align: center;
        padding: nth($d, 4);
    }
    a {
        display: inline-block;
        padding: 12px 15px;
        background: $baseColor;
        color: #fff;
        border-radius: 1.5rem;
        width: 7rem;
        text-align: center;
        margin: 10px auto;
        margin-top: 0;
    }
}

.translateY-0 {
    @include transform(translateY(0%));
}